<template>
	<view class="my-navbar">
		<template v-if="type == 'center'">
			<u-navbar placeholder :titleStyle="{'color':titleColor}" :bgColor="bgColor" :leftIconColor="leftIconColor"
				@leftClick="leftClick" :title="title">
			</u-navbar>
		</template>
		<template v-else>
			<u-navbar placeholder :titleStyle="{'color':titleColor}" :bgColor="bgColor" :leftIconColor="leftIconColor"
				@leftClick="leftClick" title=" ">
				<view style="display: flex;align-items: center;" class="" slot="left">
					<u-icon style="margin-right: 16rpx;" v-if="isLeft" name="arrow-left" color="rgba(0,0,0,.9)" size="22"></u-icon>
					<view class="title"
						:style="{'font-weight':titleWeight,'color':(isLeft?'rgba(0,0,0,.9)':'rgba(0,0,0,.6)')}">
						{{title}}</view>
				</view>
			</u-navbar>
		</template>
	</view>
</template>

<script>
	export default {
		name: 'NavbarSearch',
		data() {
			return {
				search: "",
				menuButtonInfo: null
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		computed: {},
		props: {
			type: {
				type: String,
				default: 'center'
			},
			title: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: '#040d2c'
			},
			leftIconColor: {
				type: String,
				default: '#ffffff'
			},
			bgColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			isLeft: {
				type: Boolean,
				default: true
			},
			titleWeight: {
				type: Number,
				default: 400
			},
			isShare: {
				type: Boolean,
				default: false
			},
			backRefresh:{
				type:Boolean,
				default:true
			}
		},

		onShow() {

		},
		onPullDownRefresh() {

		},
		mounted() {
			// #ifndef H5 
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			// #endif
			console.log(this.menuButtonInfo)
			
			console.info('this.isLeft===>',this.isLeft)
		},
		methods: {
			leftClick() {
				if (!this.isLeft) {
					return
				}
				if(this.isShare){
					// this.$tab.switchTab('/pages/home/index')
					// this.$tab.switchTab('/pages/teacher/resume')
					this.$tab.switchTab('/pages/group/home')
				}else{
					this.$tab.navigateBack(1,this.backRefresh)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-navbar {
		z-index: 999;
		position: relative;

		.my-navbar-center {
			margin-left: 40px;
			// width: 640rpx;
			flex: 1;
			// padding: 0 36rpx 0 98rpx;
		}

		.title {
			font-size: 32rpx;
		}
	}
</style>